<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>校园用户管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/fw/static/bootstrap/css/bootstrap.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="/fw/static/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/fw/static/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/fw/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/fw/static/dist/css/skins/skin-blue.min.css">
    <!--dataTables-->
    <link rel="stylesheet" href="/fw/static/plugins/datatables/dataTables.bootstrap.css">


<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">

        <!-- Logo -->
        <a href="#" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg">校园用户管理----老师界面</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="" class="user-image user_head_img"
                                 alt="User Image">
                            <span class="hidden-xs user_name">---</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img src="" class="img-circle user_head_img"
                                     alt="User Image">
                                <p>
                                    <span class="user_name">---</span>-呜啦啦~~
                                    <small class="now_time">
                                        2018-1-1
                                    </small>
                                </p>
                            </li>
                            <!-- Menu Body -->
                            <li class="user-body">
                                <div class="row">
                                    <div class="col-xs-4 text-center">
                                        <a href="#">我</a>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <a href="#">很</a>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <a href="#">帅</a>
                                    </div>
                                </div>
                                <!-- /.row -->
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="/fw/user/modifyData" class="btn btn-default btn-flat">修改资料</a>
                                </div>
                                <div class="pull-right">
                                    <a href="/fw/user/logout" class="btn btn-default btn-flat">退出</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

            <!-- Sidebar user panel (optional) -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="" class="img-circle  user_head_img" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p class="user_name"></p>
                    <!-- Status -->
                    <a href="#"><i class="fa fa-circle text-success"></i>online</a>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">

                <!-- Optionally, you can add icons to the links -->
                <li class="treeview">
                    <a href="#"><i class="fa fa-link"></i>
                        <span>我的班级</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="#">我的学生</a>
                        </li>
                        <li>
                            <a href="#">批改作业</a>
                        </li>
                        <li>
                            <a href="#">学生记录</a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-link"></i>
                        <span>校园生活</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="#">校园大事件</a>
                        </li>
                        <li>
                            <a href="#">校园树洞</a>
                        </li>
                        <li>
                            <a href="#">校园外卖</a>
                        </li>
                        <li>
                            <a href="#">校园交易市场</a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-link"></i>
                        <span>校园帮</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="#">我的课表</a>
                        </li>
                        <li>
                            <a href="#">成绩查询</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="height: 900px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <span>不知道写啥</span>
                <small>都这把</small>
            </h1>
        </section>
        <!-- Main content -->
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">管理学生列表</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                        <tr role="row">
                            <th>学号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>地址</th>
                            <th>班级</th>
                            <th>头像</th>
                            <th>谨慎操作</th>
                        </tr>
                        </thead>
                        <tbody class="tdoby_student_data">

                        </tbody>
                        <tfoot>
                        </tfoot>
                    </table>
                </div>

            </div>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel"
                                style="margin:0px auto;text-align: center;">
                                修改内容,谨慎修改
                            </h4>
                        </div>
                        <div class="modal-body">
                            <%--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!--%>
                            <div class="form-signin"
                                 style="width: 200px;margin: 0px auto;">
                                <div class="pull-left image" style="width: 100%;">
                                    <img id="updateImage" src=""
                                         style="max-width: 75px;margin: 0px 0px 0px 30%;"
                                         class="img-circle  user_head_img"
                                         alt="User Image">
                                </div>
                                <br/> <br/> <br/>
                                <input type="text" id="updateId" hidden>
                                <input type="text" id="updateUsername"
                                       class="form-control"
                                       placeholder="学号" required autofocus
                                       readonly><br/>
                                <input type="text" id="updateRealName"
                                       class="form-control"
                                       placeholder="真实姓名" required><br/>
                                <input type="number" id="updateAge" class="form-control"
                                       placeholder="年龄" required><br/>
                                <label class="radio-inline">
                                    <input type="radio" name="inlineRadioOptions"
                                           id="inlineRadio1" value="男"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="inlineRadioOptions"
                                           id="inlineRadio2" value="女"> 女
                                </label>
                                <br/>
                                <input type="text" id="updateAddress"
                                       class="form-control"
                                       placeholder="家庭住址" required><br/>
                                <input type="text" id="updateClass" class="form-control"
                                       placeholder="专业班级" required><br/>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">
                                关闭
                            </button>
                            <button type="button" class="btn btn-primary"
                                    onclick="updateStu()">
                                提交更改
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->


        <!-- /.box -->
    </div>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<!-- Main Footer -->
<footer class="main-footer">
    <strong>Copyright &copy; 2018 <a href="#">河南机电校园用户管理</a>.</strong> All rights reserved.
</footer>

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="/fw/static/Jquery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/fw/static/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/fw/static/dist/js/app.min.js"></script>
<script src="/fw/static/dist/js/demo.js"></script>
<script src="/fw/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/fw/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="/fw/static/js/user.js"></script>


<script type="text/javascript">
    window.onload = function (ev) {
        var now = new Date();
        var time = now.getFullYear() + "-" + ((now.getMonth() + 1) < 10 ? "0" : "") +
            (now.getMonth() + 1) + "-" + (now.getDate() < 10 ? "0" : "") + now.getDate();
        $(".now_time").html(time);
    }
</script>
</body>
<script>
    function viewUpdateStuPage(a1,a2,a3,a4,a5,a6,a7,a8) {
        $("#updateUsername").val(a1);
        $("#updateRealName").val(a2);
        a3 == "男" ? $("#inlineRadio1").attr("checked", "checked") : $("#inlineRadio2").attr("checked", "checked");
        $("#updateAge").val(a4);
        $("#updateAddress").val(a5);
        $("#updateClass").val(a6);
        $("#updateImage").attr("src", "http://p6sqqnnyf.bkt.clouddn.com/" + a7);
        $("#updateId").val(a8);
    }

    function delStu(info) {
        var con = window.confirm("您确定要删除吗?")
        if (con) {
            $.ajax({
                type: "POST",
                url: "/fw/user/delStu?id=" + info + "",
                data: {},
                success: function (dataJson) {
                    var jsonObj = $.parseJSON(dataJson);
                    if (jsonObj.status == 0) {
                        alert("删除成功!");
                        setTimeout(function (args) {
                            window.location.href = "/fw/user/teaHome";
                        }, 1000);
                    } else {
                        alert(jsonObj.msg);
                    }
                },
                error: function (dataJson) {
                    var jsonObj = $.parseJSON(dataJson);
                    alert(jsonObj.msg);
                }
            });
        }
    }

    function updateStu() {
        $.ajax({
            url: "/fw/user/updateStu",
            type: "POST",
            data: {
                "id": $("#updateId").val(),
                "username": $("#updateUsername").val(),
                "realName": $("#updateRealName").val(),
                "sex": $('input:radio[name="inlineRadioOptions"]:checked').val(),
                "age": $("#updateAge").val(),
                "address": $("#updateAddress").val(),
                "grade": $("#updateClass").val()
            },
            success: function (dataJson) {
                var jsonObj = $.parseJSON(dataJson);
                alert(jsonObj.msg);
                window.location.href = "/fw/user/teaHome";
            },
            error: function (dataJson) {
                var jsonObj = $.parseJSON(dataJson);
                alert(jsonObj.msg);
            }

        });

    }
</script>

<script>

    function formToJson(form) {
        var result = {};
        var fieldArray = $('#' + form).serializeArray();
        for (var i = 0; i < fieldArray.length; i++) {
            var field = fieldArray[i];
            if (field.name in result) {
                result[field.name] += ',' + field.value;
            } else {
                result[field.name] = field.value;
            }
        }
        return result;
    }

    var table;

    function attendQuery() {
        table.ajax.reload();
    }

    $(function () {
        //提示信息
        $.fn.dataTable.ext.errMode = 'none';

        var lang = {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 项",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页",
                "sJump": "跳转"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };

        //初始化表格
        table = $("#example2")
            .on('error.dt', function (e, settings, techNote, message) {
                console.warn(message)
            }).dataTable({
                language: lang, //提示信息
                autoWidth: false, //禁用自动调整列宽
                stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
                processing: true, //隐藏加载提示,自行处理
                serverSide: false, //启用服务器端分页
                searching: false, //禁用原生搜索
                orderMulti: false, //启用多列排序
                order: [], //取消默认排序查询,否则复选框一列会出现小箭头
                renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
                pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
                columnDefs: [{
                    "targets": 'nosort', //列的样式名
                    "orderable": false //包含上样式名‘nosort'的禁止排序
                }],
                ajax: function (data, callback, settings) {
                    //封装请求参数
                    var param = {};
                    param.pageSize = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                    param.start = data.start;//开始的记录序号
                    param.currentPage = (data.start / data.length) + 1;//当前页码
                    //console.log(param);
                    //ajax请求数据
                    $.ajax({
                        type: "GET",
                        url: "/fw/user/myStudentList",
                        cache: false, //禁用缓存
                        data: param, //传入组装的参数
                        dataType: "json",
                        success: function (result) {
                            var returnData = {};
                            returnData.draw = data.startRow;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.totalRows;//返回数据全部记录
                            returnData.recordsFiltered = result.totalRows;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.items;//返回的数据列表
                            //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        }
                    });
                },
                "columns": [
                    // {'data':'id', "visible": false},
                    {'data': 'username'},
                    // {'data': 'password' , "visible": false},
                    {'data': 'realName'},
                    {'data': 'sex'},
                    {'data': 'age'},
                    {'data': 'address'},
                    {'data': 'grade'},
                    {'data': 'headImage'},
                    // {'data': 'role', "visible": false},
                    // {'data': 'token', "visible": false},
                    {
                        "data": "谨慎操作",
                        render: function (data, type, full) {
                            var a = [full.username,"\""+full.realName+"\""
                                                    ,"\""+full.sex+"\"",full.age,"\""+full.address+"\""
                                                    ,"\""+full.grade+"\"","\""+full.headImage+"\"",full.id];
                            return "<button type='button' class='btn  btn-info' style='width: 67px;' onclick='viewUpdateStuPage(" + a + ")' data-toggle='modal' data-target='#myModal'>修改</button>" +
                                "<button type='button' class='btn  btn-warning' style='margin-left: 3px;width: 67px;' onclick='delStu(" + full.id + ")'>删除</button>";
                        }
                    },
                ]
            })
            .api();
        //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
    });

</script>
</html>